<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kickstart button style</title>
<link type="text/css" rel="stylesheet" href="kickstart-buttons.css" />
</head>
<style>
    li
    {
        display:inline-block;
        padding: 7px;
        border-bottom-color: transparent;
        border-bottom-width: 3px;
        border-bottom-style: solid;
    }
    a
    {  text-decoration: none;
        color: #ffffff;
    }
    a:hover
    {
        transition: all 0.3s ease;
        transform: rotate(5deg);
        color:#FF9;
    }
    li:hover
    {
        border-bottom-color: red;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        transition: all 0.3s ease;
        transform: translateX(20);
    }
    ul
    {
        background-color: rgba(0, 0, 0, 0.65);
        border-radius: 5px;
        border: solid 1px #c6c6c6;
        margin-top: 20px;
        width: 100%;
    }
    .traniangle
    { border-bottom-width: 5px;
        border-right-width: 15px;
        border-top-width: 13px;
        border-left-width: 15px;
        width: 0px;
        height: 0px;
        border-style:solid solid solid solid;
        border-color: #ff6308 transparent transparent transparent ;
    }
</style>
<body style="font-family:'Comic Sans MS', cursive; color:#343434; font-size:18px;">
<div>
    <ul>
        <li><a style="color: #ff9c10;" href="kickstart%20introduce%20.html"> HTML Kickstart</a></li>
        <label class="traniangle"><li><a href="table.html">table</a></li></label> <!--  class="active"-->
        <label class="traniangle"><li><a href="menus.html">menus</a></li></label>
        <label class="traniangle"><li><a href="button.html">button</a></li></label>
        <label class="traniangle"><li><a href="kickstart forms-style.html">forms</a></li></label>
    </ul>
</div>
<div style=" margin-top:50px;">
<table align="center" cellpadding="20px">
<tr>
<td colspan="6" align="center" style="font-size:28px;">HTML kickstart-button style</td>
</tr>
<tr>
<td><button class="blue" />save</button><br/>
    <details>
        <summary>class:blue</summary>
        <textarea style="width: 200px; height: 100px;">
    button.blue,
    .btn.blue,
    .button.blue,
    input[type=submit].blue,
    input[type=reset].blue,
    input[type=button].blue{
        text-shadow:0 -1px 0 #1D6DC1;
        color:#fff;
        border:1px solid #1D6DC1;
        background: rgb(122,188,255); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
        padding: 10px 15px;
        border-radius: 6px;
    }

    button.blue:hover,
    .btn.blue:hover,
    .button.blue:hover{
        text-shadow:0 1px 0 #1D6DC1;
        border:1px solid #1D6DC1;
        background: rgb(155,205,255); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(155,205,255,1) 0%, rgba(134,192,250,1) 44%, rgba(110,176,242,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(155,205,255,1)), color-stop(44%,rgba(134,192,250,1)), color-stop(100%,rgba(110,176,242,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(155,205,255,1) 0%,rgba(134,192,250,1) 44%,rgba(110,176,242,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(155,205,255,1) 0%,rgba(134,192,250,1) 44%,rgba(110,176,242,1) 100%); /* Opera 11.10+ */
        background: linear-gradient(top, rgba(155,205,255,1) 0%,rgba(134,192,250,1) 44%,rgba(110,176,242,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bcdff', endColorstr='#6eb0f2',GradientType=0 ); /* IE6-9 */
        padding: 10px 15px;
        border-radius: 6px;
    }
              </textarea>
        </details>
</td>
<td><button class="btn"/>submit</button><br/>
    <details>
        <summary>class:btn</summary>
        <textarea style="width: 200px; height: 100px;">
                button:hover,
    .btn:hover,
    .button:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover{
        border:1px solid #bbb;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */

    }
    button,
    .btn,
    .btn:visited,
    .button,
    .button:visited,
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        position:relative;
        top:0;
        left:0;
        vertical-align: middle;
        margin:0;
        padding:10px 15px;
        line-height:100%;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        cursor: pointer;
        width:auto;
        overflow:visible;
        font-weight:normal;
        font-size:14px; /*Pixels for consistancy*/
        text-shadow:0 1px 0 #fff;
        color:#666;
        text-decoration:none;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display:inline-block;
        *display:inline;/*IE ONLY*/
        zoom:1;
        border:1px solid #ccc;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    }
        </textarea>
        </details>
</td>
<td><button class="button"/>send</button><br/> <details>
    <summary>class:button</summary>
    <textarea style="width: 200px; height: 100px;">
     button:hover,
    .btn:hover,
    .button:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover{
        border:1px solid #bbb;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */

    }
    button,
    .btn,
    .btn:visited,
    .button,
    .button:visited,
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        position:relative;
        top:0;
        left:0;
        vertical-align: middle;
        margin:0;
        padding:10px 15px;
        line-height:100%;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        cursor: pointer;
        width:auto;
        overflow:visible;
        font-weight:normal;
        font-size:14px; /*Pixels for consistancy*/
        text-shadow:0 1px 0 #fff;
        color:#666;
        text-decoration:none;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display:inline-block;
        *display:inline;/*IE ONLY*/
        zoom:1;
        border:1px solid #ccc;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    }
    </textarea>
</details>
</td>
<td><button class="button-bar"/>submit</button><br/>
    <details>
        <summary>class:button-bar</summary>
    <textarea style="width: 200px; height: 100px;">
      button:hover,
    .btn:hover,
    .button:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover{
        border:1px solid #bbb;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */

    }
    button,
    .btn,
    .btn:visited,
    .button,
    .button:visited,
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        position:relative;
        top:0;
        left:0;
        vertical-align: middle;
        margin:0;
        padding:10px 15px;
        line-height:100%;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        cursor: pointer;
        width:auto;
        overflow:visible;
        font-weight:normal;
        font-size:14px; /*Pixels for consistancy*/
        text-shadow:0 1px 0 #fff;
        color:#666;
        text-decoration:none;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display:inline-block;
        *display:inline;/*IE ONLY*/
        zoom:1;
        border:1px solid #ccc;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    }
    </textarea>
    </details></td>
<td><button class="disabled"/>load</button><br/>
    <details>
        <summary>class:disabled</summary>
    <textarea style="width: 200px; height: 100px;">
         .disabled {color:#ccc;cursor:default;background:#efefef;}
   .disabled:hover{border:1px solid #ccc;background:#efefef;}
    button,
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        position:relative;
        top:0;
        left:0;
        vertical-align: middle;
        margin:0;
        padding:10px 15px;
        line-height:100%;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        cursor: pointer;
        width:auto;
        overflow:visible;
        font-weight:normal;
        font-size:14px; /*Pixels for consistancy*/
        text-shadow:0 1px 0 #fff;
        color:#666;
        text-decoration:none;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display:inline-block;
        *display:inline;/*IE ONLY*/
        zoom:1;
        border:1px solid #ccc;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    }
    </textarea>
    </details></td>
<td><button class="first" />load</button><br/>
    <details>
        <summary>class:first</summary>
        <textarea style="width: 200px; height: 100px;">
            .button-bar .first {
        -moz-border-radius-bottomleft: 5px;
        -moz-border-radius-topleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -webkit-border-top-left-radius: 5px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        -moz-background-clip:content-box;
        -webkit-background-clip: border;
        background-clip: content-box;
    }
    button:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover{
        border:1px solid #bbb;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */

    }
    button,
    button:visited,
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        position:relative;
        top:0;
        left:0;
        vertical-align: middle;
        margin:0;
        padding:10px 15px;
        line-height:100%;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        cursor: pointer;
        width:auto;
        overflow:visible;
        font-weight:normal;
        font-size:14px; /*Pixels for consistancy*/
        text-shadow:0 1px 0 #fff;
        color:#666;
        text-decoration:none;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display:inline-block;
        *display:inline;/*IE ONLY*/
        zoom:1;
        border:1px solid #ccc;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    }
        </textarea>
        </details>
</td>
</tr>
<tr>
<td><button class="green"/>load</button><br/>
    <details>
        <summary>class:green</summary>
        <textarea style="width: 200px; height: 100px;">
  .green
     {
       text-shadow:0 -1px 0 #669E00;
       color:#fff;
       border:1px solid #669E00;
       background: rgb(143,196,0); /* Old browsers */
       background: -moz-linear-gradient(top, rgba(143,196,0,1) 0%, rgba(107,165,0,1) 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(107,165,0,1))); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(107,165,0,1) 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(107,165,0,1) 100%); /* Opera 11.10+ */
       background: linear-gradient(top, rgba(143,196,0,1) 0%,rgba(107,165,0,1) 100%); /* W3C */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#6ba500',GradientType=0 ); /* IE6-9 */
       padding: 10px 15px;
       border-radius: 6px;
        }
   .green:hover{
       text-shadow:0 1px 0 #669E00;
       border:1px solid #669E00;
       background: rgb(198,226,120); /* Old browsers */
       background: -moz-linear-gradient(top, rgba(198,226,120,1) 0%, rgba(167,211,44,1) 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(198,226,120,1)), color-stop(100%,rgba(167,211,44,1))); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top, rgba(198,226,120,1) 0%,rgba(167,211,44,1) 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top, rgba(198,226,120,1) 0%,rgba(167,211,44,1) 100%); /* Opera 11.10+ */
       background: linear-gradient(top, rgba(198,226,120,1) 0%,rgba(167,211,44,1) 100%); /* W3C */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6e278', endColorstr='#a7d32c',GradientType=0 ); /* IE6-9 */
       padding: 10px 15px;
       border-radius: 6px;
   }

            </textarea>
        </details>
</td>
<td><button class="inset" />load</button><br/>
    <details>
        <summary>class:inset</summary>
        <textarea style="width: 200px; height: 100px;">
               button:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover{
        border:1px solid #bbb;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */

    }
    button,
    button:visited,
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        position:relative;
        top:0;
        left:0;
        vertical-align: middle;
        margin:0;
        padding:10px 15px;
        line-height:100%;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        cursor: pointer;
        width:auto;
        overflow:visible;
        font-weight:normal;
        font-size:14px; /*Pixels for consistancy*/
        text-shadow:0 1px 0 #fff;
        color:#666;
        text-decoration:none;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display:inline-block;
        *display:inline;/*IE ONLY*/
        zoom:1;
        border:1px solid #ccc;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    }
    .inset{-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.3);box-shadow:inset 0 1px 3px rgba(0,0,0,0.3);}

            </textarea>
    </details>
    </td>
<td><button class="large"  />load</button><br/>
    <details>
        <summary> class:large</summary>
        <textarea style="width: 200px; height: 100px;">
           button:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover{
        border:1px solid #bbb;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */

    }
    button,
    button:visited,
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        position:relative;
        top:0;
        left:0;
        vertical-align: middle;
        margin:0;
        padding:10px 15px;
        line-height:100%;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        cursor: pointer;
        width:auto;
        overflow:visible;
        font-weight:normal;
        font-size:14px; /*Pixels for consistancy*/
        text-shadow:0 1px 0 #fff;
        color:#666;
        text-decoration:none;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display:inline-block;
        *display:inline;/*IE ONLY*/
        zoom:1;
        border:1px solid #ccc;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    }
    button.large{font-size:1.3em;padding:10px 20px;}

        </textarea>
    </details>
   </td>
<td><button class="last" />load</button><br/>
    <details>
        <summary>class:last</summary>
        <textarea style="width: 200px; height: 100px;">
   button:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover{
        border:1px solid #bbb;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */

    }
    button,
    button:visited,
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        position:relative;
        top:0;
        left:0;
        vertical-align: middle;
        margin:0;
        padding:10px 15px;
        line-height:100%;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        cursor: pointer;
        width:auto;
        overflow:visible;
        font-weight:normal;
        font-size:14px; /*Pixels for consistancy*/
        text-shadow:0 1px 0 #fff;
        color:#666;
        text-decoration:none;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display:inline-block;
        *display:inline;/*IE ONLY*/
        zoom:1;
        border:1px solid #ccc;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    }
    .last {
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-topright: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        -moz-background-clip:content-box;
        -webkit-background-clip: border;
    }
            </textarea>
    </details>
    </td>
<td><button class="medium" />load</button><br/>
    <details>
        <summary> class:medium</summary>
        <textarea style="width: 200px; height: 100px;">
   button:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover{
        border:1px solid #bbb;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */

    }
    button,
    button:visited,
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        position:relative;
        top:0;
        left:0;
        vertical-align: middle;
        margin:0;
        padding:10px 15px;
        line-height:100%;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        cursor: pointer;
        width:auto;
        overflow:visible;
        font-weight:normal;
        font-size:14px; /*Pixels for consistancy*/
        text-shadow:0 1px 0 #fff;
        color:#666;
        text-decoration:none;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display:inline-block;
        *display:inline;/*IE ONLY*/
        zoom:1;
        border:1px solid #ccc;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    }
    .medium {
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-topright: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        -moz-background-clip:content-box;
        -webkit-background-clip: border;
    }

            </textarea>
    </details>
   </td>
<td><button class="orange" />load</button><br/>
    <details>
        <summary> class:orange</summary>
        <textarea style="width: 200px; height: 100px;">
   .orange{
        text-shadow:0 -1px 0 #FC730A;
        color:#fff;
        border:1px solid #FC730A;
        background: rgb(255,168,76); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,168,76,1)), color-stop(100%,rgba(255,123,13,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Opera 11.10+ */
        background: linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */
       padding: 10px 15px;
       border-radius: 6px;
   }
    .orange:hover{
        text-shadow:0 1px 0 #FC730A;
        border:1px solid #FC730A;
        background: rgb(255, 211, 71); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(249,191,74,1) 0%, rgba(249,181,9,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,191,74,1)), color-stop(100%,rgba(249,181,9,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(249,191,74,1) 0%,rgba(249,181,9,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(249,191,74,1) 0%,rgba(249,181,9,1) 100%); /* Opera 11.10+ */
        background: linear-gradient(top, rgba(249,191,74,1) 0%,rgba(249,181,9,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9bf4a', endColorstr='#f9b509',GradientType=0 ); /* IE6-9 */
        padding: 10px 15px;
        border-radius: 6px;
    }
        </textarea>
    </details>
   </td>
<tr>
<td><button class="pill" />load</button><br/>
    <details>
        <summary>class:pill</summary>
        <textarea style="width: 200px; height: 100px;">
    button:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover{
        border:1px solid #bbb;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */

    }
    button,
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        position:relative;
        top:0;
        left:0;
        vertical-align: middle;
        margin:0;
        padding:10px 15px;
        line-height:100%;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        cursor: pointer;
        width:auto;
        overflow:visible;
        font-weight:normal;
        font-size:14px; /*Pixels for consistancy*/
        text-shadow:0 1px 0 #fff;
        color:#666;
        text-decoration:none;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display:inline-block;
        *display:inline;/*IE ONLY*/
        zoom:1;
        border:1px solid #ccc;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    }
    .pill{-webkit-border-radius:200em;-moz-border-radius:200em;border-radius:200em;}
            </textarea>
    </details>
    </td>
<td><button class="pink"  />send</button><br/>
    <details>
        <summary>class:pink</summary>
        <textarea style="width: 200px; height: 100px;">
.pink{
        text-shadow:0 -1px 0 #EF0251;
        color:#fff;
        border:1px solid #EF0251;
        background: rgb(255,93,177); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(255,93,177,1) 0%, rgba(239,1,124,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,93,177,1)), color-stop(100%,rgba(239,1,124,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(255,93,177,1) 0%,rgba(239,1,124,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(255,93,177,1) 0%,rgba(239,1,124,1) 100%); /* Opera 11.10+ */
        background: linear-gradient(top, rgba(255,93,177,1) 0%,rgba(239,1,124,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); /* IE6-9 */
        padding: 10px 15px;
        border-radius: 6px;
    }
    .pink:hover{
        text-shadow:0 1px 0 #EF0251;
        border:1px solid #EF0251;
        background: rgb(255,169,213); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(255,169,213,1) 0%, rgba(254,112,185,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,169,213,1)), color-stop(100%,rgba(254,112,185,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(255,169,213,1) 0%,rgba(254,112,185,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(255,169,213,1) 0%,rgba(254,112,185,1) 100%); /* Opera 11.10+ */
        background: linear-gradient(top, rgb(255, 169, 213) 0%,rgba(254,112,185,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa9d5', endColorstr='#fe70b9',GradientType=0 ); /* IE6-9 */
        padding: 10px 15px;
        border-radius: 6px;
    }

            </textarea>
    </details>
    </td>
<td><button class="pop" />load</button><br/>
    <details>
        <summary>class:pop</summary>
        <textarea style="width: 200px; height: 100px;">
    button:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover{
        border:1px solid #bbb;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */

    }
    button,
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        position:relative;
        top:0;
        left:0;
        vertical-align: middle;
        margin:0;
        padding:10px 15px;
        line-height:100%;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        cursor: pointer;
        width:auto;
        overflow:visible;
        font-weight:normal;
        font-size:14px; /*Pixels for consistancy*/
        text-shadow:0 1px 0 #fff;
        color:#666;
        text-decoration:none;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display:inline-block;
        *display:inline;/*IE ONLY*/
        zoom:1;
        border:1px solid #ccc;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    }
    .pop{-webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.2);-moz-box-shadow:0px 1px 5px rgba(0,0,0,0.2);box-shadow:0px 1px 5px rgba(0,0,0,0.2);}
            </textarea>
    </details>
    </td>
<td><button class="red"  />wrong</button><br/>
    <details>
        <summary>class:red</summary>
        <textarea style="width: 200px; height: 100px;">
.red{
        text-shadow:0 -1px 0 #B21203;
        color:#fff;
        border:1px solid #B21203;
        background: rgb(229,60,22); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(229,60,22,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,60,22,1)), color-stop(100%,rgba(207,4,4,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(229,60,22,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(229,60,22,1) 0%,rgba(207,4,4,1) 100%); /* Opera 11.10+ */
        background: linear-gradient(top, rgba(229,60,22,1) 0%,rgba(207,4,4,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e53c16', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
        padding: 10px 15px;
        border-radius: 6px;
    }
    .red:hover{
        text-shadow:0 1px 0 #B21203;
        border:1px solid #B21203;
        background: rgb(238,106,76); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(238,106,76,1) 0%, rgba(251,33,33,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,106,76,1)), color-stop(100%,rgba(251,33,33,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(238,106,76,1) 0%,rgba(251,33,33,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(238,106,76,1) 0%,rgba(251,33,33,1) 100%); /* Opera 11.10+ */
        background: linear-gradient(top, rgb(255, 113, 81) 0%, rgb(251, 112, 30) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee6a4c', endColorstr='#fb2121',GradientType=0 ); /* IE6-9 */
        padding: 10px 15px;
        border-radius: 6px;
    }
            </textarea>
    </details>
    </td>
<td><button class="small"  />load</button><br/>
    <details>
        <summary> class:small</summary>
        <textarea style="width: 200px; height: 100px;">
                button:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover{
        border:1px solid #bbb;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */

    }
    button,
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        position:relative;
        top:0;
        left:0;
        vertical-align: middle;
        margin:0;
        padding:10px 15px;
        line-height:100%;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        cursor: pointer;
        width:auto;
        overflow:visible;
        font-weight:normal;
        font-size:14px; /*Pixels for consistancy*/
        text-shadow:0 1px 0 #fff;
        color:#666;
        text-decoration:none;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display:inline-block;
        *display:inline;/*IE ONLY*/
        zoom:1;
        border:1px solid #ccc;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    }
    .small{font-size:0.8em;padding:5px 10px;}
            </textarea>
    </details>
   </td>
<td><button class="square" />load</button><br/>
    <details>
        <summary>class:square</summary>
        <textarea style="width: 200px; height: 100px;">
                button:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover{
        border:1px solid #bbb;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */

    }
    button,
    input[type="submit"],
    input[type="reset"],
    input[type="button"]{
        position:relative;
        top:0;
        left:0;
        vertical-align: middle;
        margin:0;
        padding:10px 15px;
        line-height:100%;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        cursor: pointer;
        width:auto;
        overflow:visible;
        font-weight:normal;
        font-size:14px; /*Pixels for consistancy*/
        text-shadow:0 1px 0 #fff;
        color:#666;
        text-decoration:none;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display:inline-block;
        *display:inline;/*IE ONLY*/
        zoom:1;
        border:1px solid #ccc;
        background: rgb(252,252,252); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(252,252,252,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    }
    .square{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}
            </textarea>
    </details>
    </td>
</tr>
</table>
<hr width="70%" size="5" color="#343434"/>
<div style=" text-align:center; font-size:18px;">Welcome to join in the “二班Open Source”</div>
</div>
</body>
</html>
